<template>
    <el-menu class="el-menu-vertical-demo" :default-active="currentActive" @open="handleOpen" @close="handleClose">

        <div class="menu-top">
            SMS学生管理系统
        </div>

        <router-link to="/home/course_choose" style="text-decoration: none" v-if="roleId == 1">
            <el-menu-item index="1-1" :class="{ 'active': currentActive === '1-1' }" @click="setActive('1-1')"><el-icon>
                    <Calendar />
                </el-icon>
                <span>学生选课</span></el-menu-item>
        </router-link>

        <router-link to="/home/leave_submit" style="text-decoration: none" v-if="roleId == 1">
            <el-menu-item index="1-2" :class="{ 'active': currentActive === '1-2' }" @click="setActive('1-2')"><el-icon>
                    <MessageBox />
                </el-icon>
                <span>学生请假</span></el-menu-item>
        </router-link>

        <router-link to="/home/review_by_head_teacher" style="text-decoration: none" v-if="roleId == 2">
            <el-menu-item index="1-3" :class="{ 'active': currentActive === '1-3' }" @click="setActive('1-3')"><el-icon>
                    <Tickets />
                </el-icon>
                <span>请假审批</span></el-menu-item>
        </router-link>

        <router-link to="/home/review_by_counselor" style="text-decoration: none" v-if="roleId == 3">
            <el-menu-item index="1-4" :class="{ 'active': currentActive === '1-4' }" @click="setActive('1-4')"><el-icon>
                    <Tickets />
                </el-icon>
                <span>请假审批</span></el-menu-item>
        </router-link>


        <el-menu-item @click="handleLogout()"><el-icon>
                <User />
            </el-icon>
            <span>退出登录</span></el-menu-item>

    </el-menu>
</template>

<script setup lang="js">
import {
    Avatar,
    Calendar,
    MessageBox,
    Tickets,
    User
} from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { inject, onMounted, ref } from "vue";
const message = inject("message");
import { useUserStore } from '../store/user';

const route = useRoute();
const userStore = useUserStore();
const roleId = ref(0);
const currentActive = ref('');
const router = useRouter();

// 从 Local Storage 读取状态
const loadActiveMenu = () => {
    const activeMenu = localStorage.getItem('activeMenu');
    if (activeMenu) {
        currentActive.value = activeMenu;

    } else {
        currentActive.value = ''; // 默认菜单项
    }
};

const setActive = (index, routerName) => {
    currentActive.value = index;
    // 将状态持久化到 Local Storage
    localStorage.setItem('activeMenu', index);
};

const handleLogout = () => {
    const form = {
        "id": null,
        "email": null,
        "password": null,
        "name": null,
        "roleId": null,
        "headTeacherId": null,
        "counselorId": null,
        "classId": null
    }
    userStore.setUser(form);
    message.success("登出成功！")
    router.push({
        path: "/login"
    })
}

onMounted(() => {
    // 从用户 Store 获取角色
    roleId.value = userStore.user?.roleId;
    loadActiveMenu(); // 加载激活菜单
});

// 这里的 handleOpen 和 handleClose 函数没有改动，可以根据需要添加逻辑

// const handleOpen = (key: string, keyPath: string[]) => {
//     // 处理打开菜单项的逻辑
// };

// const handleClose = (key: string, keyPath: string[]) => {
//     // 处理关闭菜单项的逻辑
// };
</script>

<style lang="scss" scoped>
* {
    // height: 100%;
    width: 100%;
    border: none;

    .menu-top {
        height: 60px;
        width: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        align-items: center;
        padding-left: 22px;
        font-size: 15px;
        color: var(--el-color-primary);
        border-bottom: 1px solid var(--el-menu-border-color);
        // margin-bottom: 20px;
    }

    // .menu-top:deep(.el-descriptions){
    //     border-radius: 16px;
    // }

    .el-menu-item:hover {
        background-color: var(--el-color-primary-light-7);
    }

    .el-menu-item.active {
        color: var(--el-color-primary);
    }
}
</style>
